<template>
  <page-frame>
    <template #header-left>
      <span></span>
    </template>
    <template #header-title>
      <span>请求测试</span>
    </template>
    <template>
      <div class="w h over-a-y">
        <div v-for="i in 7">
          <el-button class="m2" @click="click(i)"><span class="c-p">{{label[i-1]}}</span>
          </el-button>
          <div v-if="result[i-1]" class="b-p1 tip-p over-a" style="text-overflow: clip;">
            result： {{result[i-1]}}
          </div>
          <div v-if="result[i-1]" class="b-w1 tip-w over-a" style="text-overflow: clip;">
            result['data']：{{result[i-1]['data']}}
          </div>
          <div v-if="result[i-1]" class="b-d1 tip-d">
            result：数据类型{{typeof result[i-1]}}<br />
            result['data']：获取到的数据类型{{typeof result[i-1]['data']}}
          </div>
        </div>
        <div class="f-s tip-b b-p1">系统唯一编码：{{UUID}} | {{UUID.length}}</div>
        <el-input v-model="pushMsg"  placeholder="发送一条消息"></el-input>
        <el-button type="danger" @click="pushMsgToSystem">显示推送消息</el-button>
        <br>
        <el-button class="m-t5" type="primary" @click="goPageOther">打开input type="file"页 和下载测试页面</el-button>
        <div class="w h-200"></div>

      </div>
    </template>
  </page-frame>
</template>

<script>
export default {
  data() {
    return {
      result: [],
      label: ['单字符串', ' 多个参数', '多个字符串返回数组', '多个参数和数组', '实体类', ' 集合,泛型为实体类 List<Article>', '测试自动注入实例化对象'],
      remotes: [
        { path: 'test/get6', method: 'get', params: '张三' },
        { path: 'test/get', method: 'get', params: { str2: '2', str: 'html' } },
        { path: 'test/get2', method: 'get', params: { str2: '2', str: 'html' } },
        { path: 'test/get3', method: 'get', params: { str2: '2', str: ['html', '张某某'] } },
        {
          path: 'test/get4', params:
          {
            content: '这是文章内容', id: '123', image: 'imagess', isDelete: '0', createdBy: '1',
            createdTime: new Date(), updatedTime: '2014年02月08日',
            title: '这是标题'
          }
        },
        {
          path: 'test/get5',
          params:
            [{
              content: '这是文章内容1', id: '123', image: 'imagess1', isDelete: '0', createdBy: '1',
              createdTime: new Date(), updatedTime: '2014年02月08日', title: '这是标题'
            },
            {
              content: '这是文章内容2', id: '123', image: 'imagess2', isDelete: '1', createdBy: '2',
              createdTime: new Date(), updatedTime: '2023年02月08日', title: '这是标题3'
            }]
        },
        { path: 'test/get7', },
      ],
      pushMsg: '',
      pushMsgResult: '',
      intervalId: null,
      UUID: ' ',
    }
  },
  watch: {},
  methods: {
    goPageOther(){
      this.$router.push({name:'other-page'})
    },
    click(i) {
      let remote = this.remotes[i - 1];
      let res = this.$ano.requestSync(remote['path'], remote['method'], remote['params']);
      this.$set(this.result, i - 1, res);
    },
    pushMsgToSystem() {
      this.pushMsgResult = this.$ano.requestSync('system/pushMessage', 'post', this.pushMsg);
    },
    getDeviceUUID() {
      this.UUID = this.$ano.requestSync('system/getDeviceID', 'get').data || '';
    }
  },
  created() {
    this.getDeviceUUID();
    clearInterval(this.intervalId);
    this.intervalId = setInterval(() => {
      this.pushMsg = `现在时间是：${new Date()}`
      this.pushMsgToSystem();
      this.getDeviceUUID();
    }, 30000);
  },
  destroyed() {
    clearInterval(this.intervalId);
  }
}
</script>

<style lang="scss" scoped>
.content {
  background: var(--body-background-color);
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.h-300 {
  height: 200px;
}
</style>
